<template>
    <div class="app-container">
        <a-card class="setting-card">
            <a-form ref="formRef" :model="setting" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" autocomplete="off">
                <a-form-item label="项目名称" :rules="rules.name" name="name">
                    <a-input v-model:value="setting.name" placeholder="请输入项目名称" />
                </a-form-item>
                <a-form-item label="LOGO简称" :rules="rules.logoName" name="logoName">
                    <a-input v-model:value="setting.logoName" placeholder="请输入LOGO简称" />
                </a-form-item>
                <a-form-item label="LOGO" :rules="rules.logo" name="logo">
                    <upload-image v-model:value="setting.logo" :action="action" />
                </a-form-item>
                <a-form-item label="背景图片" :rules="rules.backage" name="backage">
                    <upload-image v-model:value="setting.backage" />
                </a-form-item>
                <a-form-item class="button-item">
                    <a-button type="primary" @click="onSave">保存</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>
<script setup name="SettingModule">
import { reactive, toRaw } from 'vue'
import { getSetting, updateSetting } from '/@/api/System/Setting'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import { UploadImage, notice } from '@iframe/tools/components'
import { useSettingStore } from '@iframe/tools/store/modules/setting'

const settingStore = useSettingStore()
const action = `/api/${import.meta.env.IFRAME_CONTEXT_PATH}/upload/logo`
const setting = reactive({
    id: null,
    name: null,
    logoName: null,
    logo: null,
    backage: null
})

const rules = reactive({
    name: { required: true, message: '请输入项目名称' },
    logo: { required: true, message: '请上传logo' },
    backage: { required: true, message: '请上传背景图片' }
})

const initSetting = () => {
    getSetting().then(result => {
        if (result.code === SUCCESS_CODE) {
            setting.id = result.data.id
            setting.name = result.data.name
            setting.logoName = result.data.logoName
            setting.logo = result.data.logo
            setting.backage = result.data.backage
        }
    })
}

const onSave = () => {
    updateSetting(toRaw(setting)).then(result => {
        if (result.code === SUCCESS_CODE) {
            settingStore.setSetting(toRaw(setting))
            notice.success('保存成功')
        }
    })
}
initSetting()
</script>
<style lang="less" scoped>
.setting-card {
    width: 800px;
    margin: 0 auto;
    background-color: transparent !important;
    .button-item {
        text-align: center;
        margin-top: 10px;
    }
}
</style>
